<!--
@name:editHospitalDialog
@author:Zhenglei
@date:9:50
@description:editHospitalDialog
@update:2022/7/159:50
-->
<template>
  <div>
    <el-dialog :visible.sync="visible"
               :title="title"
               width="60%"
               :append-to-body="true"
               :before-close="modalClose"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <el-form ref="formRefs"
               :model="hospitalDetail"
               label-position="right"
               :rules="formRules"
               label-width="100px">
        <el-form-item label="头像:"
                      prop="imageUrl">
          <el-upload :action="fileUploadAction"
                     :max-size="fileMaxSize"
                     class="avatar-uploader"
                     :show-file-list="false"
                     :on-exceeded-size="showError"
                     :on-success="uploadSuccess">
            <img v-if="hospitalDetail.imageUrl" :src="hospitalDetail.imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

        </el-form-item>
        <el-form-item label="名称:"
                      prop="name">
          <el-input v-model="hospitalDetail.name"
                    placeholder="请输入名称"
                    class="w-300"/>
        </el-form-item>
        <el-form-item label="所属公司："
                      prop="company">
          <el-select v-model="hospitalDetail.company"
                     value-key="id"
                     placeholder="请选择所属公司"
                     filterable
                     remote
                     reserve-keyword
                     :remote-method="searchMethod"
                     :loading="loading"
                     class="w-300"
                     clearable>
            <el-option v-for="item in companyList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位类别:"
                      prop="level">
          <el-select v-model="hospitalDetail.type"
                     class="w-300"
                     placeholder="请选择医院等级">
            <el-option v-for="item in hospitalTypeList"
                       :value="item.id"
                       :label="item.name"
                       :key="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="单位等级:"
                      prop="level">
          <el-select v-model="hospitalDetail.level"
                     class="w-300"
                     placeholder="请选择医院等级">
            <el-option v-for="item in hospitalLevelList"
                       :value="item.level"
                       :label="item.name"
                       :key="item.level">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位性质:">
          <el-select v-model="hospitalDetail.property"
                     class="w-300"
                     clearable
                     placeholder="请选择医院性质">
            <el-option v-for="item in hospitalPropertyList"
                       :value="item.id"
                       :label="item.name"
                       :key="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否开通:"
                      prop="openStatus">
          <el-radio-group v-model="hospitalDetail.openStatus">
            <el-radio :label="0">未开通</el-radio>
            <el-radio :label="1">已开通</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="电话号码:"
                      prop="phone">
          <el-input v-model="hospitalDetail.phone"
                    class="w-300"
                    clearable
                    placeholder="请输入电话号码"/>
        </el-form-item>
        <el-form-item label="序号:"
                      prop="sortNum">
          <el-input v-model="hospitalDetail.sortNum"
                    class="w-300"
                    clearable
                    placeholder="请输入序号"/>
        </el-form-item>
        <el-form-item label="平台中心:"
                      prop="hospitalCenterName">
          <el-input v-model="hospitalDetail.hospitalCenterName"
                    class="w-300"
                    clearable
                    placeholder="请输入平台中心"/>
        </el-form-item>
        <el-row :gutter="120">
          <el-col :span="6">
            <el-form-item label="行政区域:"
                          prop="provinceId">
              <el-select v-model="hospitalDetail.provinceId"
                         class="w-300"
                         clearable
                         placeholder="请选择省"
                         @change="handleChooseProvince">
                <el-option v-for="item in provinceList"
                           :value="item.id"
                           :label="item.name"
                           :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="cityId">
              <el-select v-model="hospitalDetail.cityId"
                         class="w-300"
                         clearable
                         placeholder="请选择市"
                         @change="handleChooseCity">
                <el-option v-for="item in cityList"
                           :value="item.id"
                           :label="item.name"
                           :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="districtId">
              <el-select v-model="hospitalDetail.districtId"
                         class="w-300"
                         clearable
                         @change="handleChooseArea"
                         placeholder="请选择区">
                <el-option v-for="item in areaList"
                           :value="item.id"
                           :label="item.name"
                           :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="详细地址:"
                      prop="address">
          <el-input v-model="hospitalDetail.address"
                    class="w-300"
                    @change="handleInputAddress"
                    clearable
                    @clear="handleClearAddress"
                    :disabled="(!(hospitalDetail.provinceId !=='' && hospitalDetail.districtId !== '' && hospitalDetail.cityId !== ''))"
                    placeholder="请输入详细地址"/>
        </el-form-item>
        <el-form-item label="经度："
                      prop="longitude">
          <el-input v-model="hospitalDetail.longitude"
                    class="w-300"
                    placeholder="请输入经度"
                    clearable
                    maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="纬度："
                      prop="latitude">
          <el-input v-model="hospitalDetail.latitude"
                    class="w-300"
                    placeholder="请输入纬度"
                    clearable
                    maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="请输入介绍:"
                      prop="introduce">
          <el-input v-model="hospitalDetail.introduce"
                    type="textarea"
                    autosize
                    placeholder="请输入平台中心"/>
        </el-form-item>
        <el-form-item label="备注:"
                      prop="remark">
          <el-input v-model="hospitalDetail.remark"
                    type="textarea"
                    autosize
                    placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <p align="center">
        <el-button type="primary"
                   @click="handleSaveHospital">确 认
        </el-button>
        <el-button @click="modalClose"
                   style="margin-left: 8px">取 消
        </el-button>
      </p>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "editHospitalDialog",
  props: {
    dataObj: {
      type: Object,
      default: {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '新 增',
      fileUploadAction: this.api.file.upload,
      fileMaxSize: 1024 * 50,
      companyList: [],
      hospitalTypeList: [
        {id: 0, name: '公立医院'},
        {id: 10, name: '私立医院'},
        {id: 20, name: '诊所'},
        {id: 99, name: '药店'},
        {id: 999, name: '其他'},
      ],
      hospitalLevelList: [],
      hospitalPropertyList: [
        {
          "id": 1,
          "name": "综合医院"
        },
        {
          "id": 2,
          "name": "专科医院"
        }
      ],
      provinceList: [],
      cityList: [],
      areaList: [],
      loading: false,
      hospitalDetail: {
        id: '',
        imageUrl: '',
        name: '',
        company: '',
        level: '', // 医院等级
        property: '', // 医院性质
        openStatus: '', // 是否开通
        phone: '', // 电话号码
        sortNum: '', // 序号
        hospitalCenterName: '', // 平台中心
        provinceId: '',
        cityId: '',
        districtId: '',
        address: '',
        remark: '',
        identifier: '',
        introduce: '',
        longitude: '',
        latitude: '',
        type: ''
      },
      formRules: {
        name: [{required: true, message: '请输入请输入名称', trigger: 'blur'}],
        level: [{required: true, message: '请选择医院等级', trigger: 'chagne'}],
        property: [{required: true, message: '请选择医院性质', trigger: 'chagne'}],
        openStatus: [{required: true, message: '请选择', trigger: 'chagne'}],
        phone: [{required: true, message: '请输入电话号码', trigger: 'blur'}],
        provinceId: [{required: true, message: '请选择省', trigger: 'chagne'}],
        cityId: [{required: true, message: '请选择市', trigger: 'chagne'}],
        districtId: [{required: true, message: '请选择区', trigger: 'chagne'}],
        address: [{required: true, message: '请输入详细地址', trigger: 'blur'}],
        longitude: [{required: true, message: '请输入经度', trigger: 'blur'}],
        latitude: [{required: true, message: '请输入纬度', trigger: 'blur'}],
      }

    }
  },
  created() {
    this.getHospitalLevel()
    this.getProvinceList()
    let id = this.dataObj.id
    if (id) {
      this.title = '编 辑'
      this.getDetail(id)
    } else {
      this.title = '新 增'
    }
  },
  methods: {
    modalClose() {
      this.$emit('update:visible', false); // 直接修改父组件的属性
    },
    getDetail(id) {
      this.post(this.api.hospitalManager.getDetail, {id: id}).then((res) => {
        if (res.data.code === '200') {
          let resData = res.data.object;
          this.provinceList = resData.provinceList;
          this.cityList = resData.cityList;
          this.areaList = resData.districtList;

          this.hospitalDetail = resData;
          if (resData.companyName && resData.company) {
            this.companyList = [{name: resData.companyName, id: resData.company}]
          }
        }
      });
    },
    //获取医院等级
    getHospitalLevel() {
      this.post(this.api.hospitalLevel.getHospitalLevel, {
        pageIndex: 0,
        pageSize: 20
      }).then((res) => {
        if (res.data.code === '200') {
          this.hospitalLevelList = res.data.object;
        }
      });
    },
    //获取省
    getProvinceList() {
      this.post(this.api.baseArea).then((res) => {
        if (res.data.code === '200') {
          this.provinceList = res.data.object;
        }
      });
    },
    //获取省
    getCityList(provinceId) {
      this.post(this.api.baseArea, {
        id: provinceId
      }).then((res) => {
        if (res.data.code === '200') {
          this.cityList = res.data.object;
        }
      });
    },
    //获取区县
    getAreaList(cityId) {
      this.post(this.api.baseArea, {
        id: cityId
      }).then((res) => {
        if (res.data.code === '200') {
          this.areaList = res.data.object;
        }
      });
    },
    //选择省
    handleChooseProvince(val) {
      this.hospitalDetail.cityId = '';
      this.hospitalDetail.districtId = '';
      this.hospitalDetail.address = '';
      this.hospitalDetail.longitude = '';
      this.hospitalDetail.latitude = '';
      this.getCityList(val)
    },
    //选择市
    handleChooseCity(val) {
      this.hospitalDetail.districtId = '';
      this.hospitalDetail.address = '';
      this.hospitalDetail.longitude = '';
      this.hospitalDetail.latitude = '';
      this.getAreaList(val)
    },
    //选择区
    handleChooseArea(val) {
      this.hospitalDetail.address = '';
      this.hospitalDetail.longitude = '';
      this.hospitalDetail.latitude = '';
    },
    //输入详细地址
    handleInputAddress() {
      if (!this.hospitalDetail.address) {
        this.$message.error('请输入详细地址!');
        return
      }
      let pa = {
        area: this.provinceList.filter(res => res.id === this.hospitalDetail.provinceId)[0].name +
          this.cityList.filter(res => res.id === this.hospitalDetail.cityId)[0].name +
          this.areaList.filter(res => res.id === this.hospitalDetail.districtId)[0].name,
        address: this.hospitalDetail.address
      }
      this.post(this.api.cooperationHospital.getLongitudeAndLatitude, pa).then(res => {
        if (res.data.code === '200') {
          let resData = res.data.object;
          if (!resData.latitude || !resData.longitude) {
            this.$message.warning('暂未查询到具体经纬度信息，请手动输入');
          } else {
            this.hospitalDetail.latitude = resData.latitude;
            this.hospitalDetail.longitude = resData.longitude;
          }
        }
      })
    },
    //清空地址
    handleClearAddress() {
      this.hospitalDetail.longitude = '';
      this.hospitalDetail.latitude = '';
    },
    //保存
    handleSaveHospital() {
      this.$refs.formRefs.validate((valid) => {
        if (valid) {
          this.post(this.api.hospitalManager.saveHospital, this.hospitalDetail).then((res) => {
            if (res.data.code === '200') {
              this.$parent.initTableData();
              this.$message.success("保存成功");
              this.modalClose()
            }
          })
        }
      })
    },
    searchMethod(query) {
      if (query !== '') {
        let _this = this;
        _this.loading = true; // 锁住
        this.post(this.api.company.companyList, {
          name: query,
          pageIndex: 0,
          pageSize: 10,
          status: 1
        }).then(res => {
          if (res.data.code === '200') {
            _this.loading = false;
            _this.companyList = res.data.object;
          }
        })

      } else {
        this.companyList = [];
      }
    },
    uploadSuccess(obj) {
      if (obj.code === '200') {
        this.$message.success("上传成功");
        this.hospitalDetail.imageUrl = obj.object[0];
      }
    },
    showError(file, fileList) {
      this.$Notice.warning({
        title: '文件大小超限',
        desc: '文件  ' + file.name + ' 太大，上传文件大小不能超过100M.'
      });
    },
  },
}
</script>

<style scoped>
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 15px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
